<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" style="margin-right:10px" @click="handleCloseAll">批量删除</el-button>
        <el-input v-model="listQuery.username" placeholder="评论者" style="width:90px" />
        <el-input v-model="listQuery.sellername" placeholder="店铺名" style="width:180px" />
        <el-input v-model="listQuery.address" placeholder="店铺地址" style="width:180px" />
        <el-button type="primary" icon="el-icon-search" :disabled="isDisable" @click="search">搜索</el-button>
      </div>
      <div class="table">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="拼命加载中"
          border
          fit
          highlight-current-row
          style="width: 100%"
          :row-style="{height:'0px'}"
          :cell-style="{padding:'0px'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="45"
            align="center"
          />
          <el-table-column
            prop="username"
            label="评论者"
          />
          <el-table-column
            prop="sellername"
            label="店铺名"
          />
          <el-table-column
            width="300px"
            prop="address"
            label="店铺地址"
          />
          <el-table-column
            width="300px"
            prop="content"
            label="评论内容"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="分数" align="center" width="160px">
            <template slot-scope="scope">
              <el-rate
                v-model="scope.row.star"
                :colors="colors"
                show-score
                text-color="#ff9900"
                disabled
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            width="160px"
            label="评论时间"
            :formatter="dateFormat"
          />
          <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit" @click="showDetail(scope.row)">详情</el-button>
              <el-button type="text" icon="el-icon-delete" class="red" @click="deleteComment(scope.row)">删除评论</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            v-if="total"
            background
            :current-page="listQuery.pn"
            :page-sizes="[10, 20, 25, 30]"
            :page-size="listQuery.ps"
            layout="total, slot, sizes, prev, pager, next, jumper"
            :total="totalNumber"
            @current-change="pageChange"
            @size-change="sizeChange"
          />
        </div>
      </div>

      <!-- 详情弹出框 -->
      <el-dialog title="详情" :visible.sync="detailVisible" width="30%">
        <el-form ref="detailForm" :model="detailForm" label-width="200px" center class="formStyle">
          <el-form-item label="评论者：">
            <span class="fontStyle">{{ detailForm.username }}</span>
          </el-form-item>
          <el-form-item label="店铺名：">
            <span class="fontStyle">{{ detailForm.sellername }}</span>
          </el-form-item>
          <el-form-item label="店铺地址：">
            <span class="fontStyle">{{ detailForm.address }}</span>
          </el-form-item>
          <el-form-item label="评论内容：">
            <el-input v-model="detailForm.content" disabled type="textarea" :rows="4" />
          </el-form-item>
          <el-form-item label="评论分数：">
            <el-rate
              v-model="detailForm.star"
              class="starStyle"
              :colors="colors"
              show-score
              text-color="#ff9900"
              disabled
            />
          </el-form-item>
          <el-form-item label="评论时间：">
            <span class="fontStyle">{{ detailForm.time| timeFilter }}</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailVisible = false">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelDel">取 消</el-button>
          <el-button type="primary" @click="delRow">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量删除提示框 -->
      <el-dialog title="提示" :visible.sync="delAllVisible" width="300px" center>
        <div class="del-dialog-cnt">是否确定批量删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelDel">取 消</el-button>
          <el-button type="primary" @click="confirmCloseAll">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 批量删除第二次提示框 -->
      <el-dialog title="提示" :visible.sync="confirmDelAllVisible" width="320px" center>
        <div class="del-dialog-cnt">批量删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancelDel">取 消</el-button>
          <el-button type="primary" @click="delAll">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getComment, delComment } from '@/api/comment/comment'
import moment from 'moment'
import qs from 'qs'
export default {
  name: 'Basetable',
  filters: {
    timeFilter(time) {
      var date = time
      if (date === undefined) {
        return ''
      }
      if (date === null) {
        return ''
      }
      if (date === '') {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      multipleSelection: [],
      delAllVisible: false, // 是否弹出批量删除确认框
      confirmDelAllVisible: false,
      isDisable: false, // 是否禁用搜索按钮
      delVisible: false, // 是否弹出删除弹框
      detailVisible: false, // 是否弹出详情框
      tableData: [],

      // 详情：
      detailForm: {
        username: '',
        sellername: '',
        address: '',
        content: '',
        star: undefined,
        time: undefined
      },
      // 查询条件：
      listQuery: {
        pn: 1, // 当前页数 int
        ps: 10, // 每页大小 int
        username: '',
        sellername: '',
        address: ''
        // sort: '+id'
      },
      total: undefined, // 总页数
      totalNumber: undefined, // 总条数

      // 删除参数：
      delList: {
        list: []
      }
    }
  },
  created() {
    this.listLoading = false
    this.getList()
    // console.log('checkPhone--->' + this.checkPhone('123fvsd'))
  },
  methods: {
    // 分页：
    pageChange(num) {
      this.listQuery.pn = num
      this.getList()
    },
    sizeChange(num) {
      this.listQuery.ps = num
      // this.paginationData.currentPage == 1 && this.requestListData()
      // 每一页改变当前显示条数需要重新请求数据
      this.getList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      this.listLoading = true
      this.tableData = []
      getComment(qs.stringify(this.listQuery)).then(res => {
        this.total = res.CommentList.totalPage
        this.totalNumber = res.CommentList.totalCount
        if (res.CommentList.list !== null && res.CommentList.list.length !== 0) {
          this.tableData = res.CommentList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
    },

    search() {
      this.isDisable = true
      this.tableData = []
      this.getList()
      setTimeout(() => {
        this.isDisable = false// 点击一次时隔两秒后才能再次点击
      }, 2000)
    },
    deleteComment(row) {
      this.delList.list.push(row.id)
      this.delVisible = true
    },
    delRow() {
      // 把closeList里面要查封的商品ID传给后端
      var params = new URLSearchParams()
      params.append('delList', this.delList.list)
      delComment(params).then(response => {
        if (response.code === 200) {
          this.$message.success('删除成功')
          this.delList.list = []
          this.getList()
        } else {
          this.$message.warning('删除失败')
        }
        this.delList.list = []
      })
      this.delVisible = false
      this.delAllVisible = false
      this.confirmDelAllVisible = false
    },
    cancelDel() {
      this.delVisible = false
      this.delAllVisible = false
      this.confirmDelAllVisible = false
      // 清空选项，项目中：请求接口后，重新请求数据渲染页面的时候，使用此方式，清空选中勾选状态。
      this.multipleSelection = []
    },
    handleCloseAll() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请先选择待查封的商家')
      } else {
        this.delAllVisible = true
      }
    },
    confirmCloseAll() {
      this.delAllVisible = false
      this.confirmDelAllVisible = true
    },
    delAll() {
      const length = this.multipleSelection.length
      for (let i = 0; i < length; i++) {
        this.delList.list.push(this.multipleSelection[i].id)
      }
      this.delRow()
      this.multipleSelection = []
    },
    // 时间戳转时间：
    dateFormat(row, column) {
      var date = row[column.property]
      if (date === undefined) {
        return ''
      }
      if (date === null) {
        return ''
      }
      if (date === '') {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    showDetail(row) {
      this.detailForm = {
        username: row.username,
        sellername: row.sellername,
        address: row.address,
        content: row.content,
        star: row.star,
        time: row.time
      }
      this.detailVisible = true
    }
  }
}
</script>
<style scoped>
  .image {
    /* height: 70px; */
    width: 100%;
    display: block;
  }
  .fontStyle{
  font-size: 18px;
  color:#6b6c6e;
  font-family: '楷体';
}
  .starStyle{
    font-size: 18px;
    margin-top:10px;
  }
.page{
  margin-top: 1%;
  margin-bottom: 2%;
  float: right;
}
.container{
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
}
    .handle-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 120px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .green{
        color: #228B22;
    }
    .mr10{
        margin-right: 10px;
    }
    .formStyle{
      margin-left: -10%;
      margin-right: 5%;
    }
</style>
